<template>
    <!-- component/comment_pop/comment_pop.wxml -->
    <view class="my-dialog" v-if="showDialog">
        <view class="my-mask"></view>
        <view class="my-container">
            <view class="title">我的评价</view>
            <view class="content">
                <view class="grade_group">
                    <view class="star_group">
                        <text>评分</text>
                        <view class="stars">
                            <image data-index="1" @tap="mark" :src="grade >= 1 ? '/static/file/images/star.png' : '/static/file/images/star0.png'"></image>
                            <image data-index="2" @tap="mark" :src="grade >= 2 ? '/static/file/images/star.png' : '/static/file/images/star0.png'"></image>
                            <image data-index="3" @tap="mark" :src="grade >= 3 ? '/static/file/images/star.png' : '/static/file/images/star0.png'"></image>
                            <image data-index="4" @tap="mark" :src="grade >= 4 ? '/static/file/images/star.png' : '/static/file/images/star0.png'"></image>
                            <image data-index="5" @tap="mark" :src="grade >= 5 ? '/static/file/images/star.png' : '/static/file/images/star0.png'"></image>
                        </view>
                    </view>
                    <view class="grade">{{ grade }}.0</view>
                </view>
                <view class="msg">
                    <textarea maxlength="-1" @input="leaveMsg" :value="message" placeholder="请输入内容"></textarea>
                </view>
            </view>
            <view class="btn-row">
                <view class="confirm" @tap="confirmFun">确定</view>
                <view class="cancel" @tap="cancelFun">取消</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/comment_pop/comment_pop.js
export default {
    data() {
        return {
            showDialog: false,
            grade: 0,
            message: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        title: {
            type: String,
            // 初始值
            default: '请确认提交信息'
        },
        content: {
            type: Array
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        show() {
			this.showDialog = true; 
        },
        hide() {
			this.showDialog = false;  
        },
        //输入留言
        leaveMsg(e) {
            var val = e.detail.value;
			this.message = val;   
        },
        //打分
        mark(e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
			this.grade = index; 
        },
        /*
         * 内部私有方法建议以下划线开头
         * triggerEvent 用于触发事件
         */
        cancelFun() {
            //触发取消回调
            // this.triggerEvent("cancel");
            this.showDialog = false;  
        },
        confirmFun() {
            //触发成功回调
            this.$emit('confirm');
        }
    },
    created: function () {}
};
</script>
<style>
@import './comment_pop.css';
</style>
